<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-refresh-right" size="mini" @click="getList">刷新</el-button>
      </el-col>

    </el-row>



    <el-table v-loading="loading" :data="list">
      <el-table-column label="车牌号" align="center" prop="CarNo" />
      <el-table-column label="入库件数" align="center" prop="Output_cout" />
      <el-table-column label="出库吨数" align="center" prop="Output_ton" />
      <el-table-column label="订单号" align="center" prop="Order_no" />
      <el-table-column label="出船日" align="center" prop="Chuchuan" />
      <el-table-column label="提单号" align="center" prop="Get_no" />
      <el-table-column label="业务号" align="center" prop="Bus_no" />
      <el-table-column label="仓储费" align="center" prop="Cang_money" />
      <el-table-column label="剩余吨数" align="center" prop="Exist_ton" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-delete" @click="changeItem(scope.row)">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加或修改推荐re对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form :model="form" label-width="80px">
        <el-form-item label="货代公司">
          <el-button type="primary" @click="openItem = true">选择</el-button>
          <span style="margin:10px">{{ showCName(form.CompanyId) }} </span>
        </el-form-item>
        <el-form-item label="车牌号">
          <el-input v-model="form.CarNo" placeholder="车牌号" />
        </el-form-item>
        <el-form-item label="出库件数">
          <el-input v-model="form.Output_cout" placeholder="出库件数" />
        </el-form-item>
        <el-form-item label="出库吨数">
          <el-input v-model="form.Output_ton" placeholder="出库吨数" @input="inputWeight" />
        </el-form-item>

        <el-form-item label="订单号">
          <el-input v-model="form.Order_no" placeholder="车牌号" />
        </el-form-item>

        <el-form-item label="出船日">
          <el-date-picker v-model="outputDate" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="提单号">
          <el-input v-model="form.Get_no" placeholder="提单号" />
        </el-form-item>
        <el-form-item label="业务号">
          <el-input v-model="form.Bus_no" placeholder="业务号" />
        </el-form-item>
        <el-form-item label="仓储费">
          <el-input v-model="form.Cang_money" placeholder="仓储费" readonly />
        </el-form-item>
        <el-form-item label="剩余吨数">
          <el-input v-model="form.Exist_ton" placeholder="剩余吨数" readonly />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="选择货代公司" :visible.sync="openItem" width="800px" append-to-body>
      <CompanyCVue @companyC="getCInfo" v-if="openItem" />
    </el-dialog>
<div>
  <span>出库总吨数：{{totalWight}}吨 </span>
  <span>总费用：{{totalMoney}}元</span>
</div>
   
  </div>
</template>

<script>

import { inputList } from '@/api/portMange';
import { OutputList, updateOutput, deleteOutput, addOutput } from '@/api/portMange';
import { DateToStr, DateMinus } from "@/utils/dateUtils"
import { getCompany } from '@/api/company.js';
import CompanyCVue from '../components/Company-C.vue';

import { ref, reactive } from 'vue'

    let list= reactive([]) 
     let clist= reactive([]) 
     let loading= ref(true) 
     let outputDate= ref('') 
     let title= ref("") 
     let open = (false) 
     let form= reactive({}) 
     let inputList= reactive([]) 
     let inputTime= ref('') 
     let day= ref(0) 
     let allWight= ref(0) 
      // 堆存费计算
     let totalMoney= ref(0) 
     let totalWight= ref(0) 
 

  
    //计算费用
    function inputChange(val) {
      if (form.CompanyId) {
        form.Cang_money = "0"
        if (val && day > 14) {
          form.Cang_money = (day - 14) * 0.5 * parseInt(val) + "";
        }
      }
    }
    // 剩余的吨数
    function inputWeight(val) {
      if (form.CompanyId) {
      
        form.Exist_ton = allWight - parseInt(val) + ''
          if(!val)  form.Exist_ton = ""
        //计算
        if (outputDate) {
          countMoney(outputDate);
        }
      }
    }
    //  计算费用
   function  countMoney(val) {
      if (val && inputTime) {
        let temDate = DateToStr(val)
        day = parseInt(DateMinus(inputTime, temDate)) + 1
        inputChange(form.Output_ton);
      }
    }
    // 修改
   function  changeItem(row) {
      open = true;
      form = row;
      outputDate = new Date(row.Chuchuan)
    }

    // 获取数据列表
    function getList() {
      loading = false;
      form = {};
      OutputList({}).then(res => {
        list = res.data.value
        console.log(list,"this");
        totalMoney = gettotlaMoney(list,"Cang_money")
        totalWight = gettotlaMoney(list,"Output_ton")
        loading = false;
      })
      inputList({}).then(res => {
        inputList = res.data.value
      })
      getCompany({}).then(res => {
        clist = res.data.value
      })
    }
    //计算总费用
   function  gettotlaMoney(arr = [],key) {
      let tem = 0;
       arr.forEach(item=>{
          tem = tem + parseInt(item[key])
       })
       return tem;
    }
 
    // 取消按钮
   function cancel() {
      open = false;

    }
    /** 新增按钮操作 */
   function handleAdd() {
      form = {}
      open = true;
      title = "添加";
    }

    /** 提交按钮 */
    function submitForm() {
      form.Chuchuan = DateToStr(outputDate)
      if (form.Id) {
        updateOutput(form).then(res => {
          cancel()
          getList();

        })
      } else {
        addOutput(form).then(res => {
          cancel()
          getList();
        })
      }
    }
    /** 删除按钮操作 */
    function handleDelete(row) {
      let that = this;
      that.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteOutput({
          ids: row.Id
        }).then(res => {
          that.getList();
        })
      }).catch(() => { })
    }
   function showCName(id) {
      let dat = "";
      if (id) {
        for (let i = 0; i < clist.length; i++) {
          if (clist[i].Id == id) {
            dat = clist[i].Name
          }
        }
        // 属于现在货代公司的入库信息
        let tem = inputList.filter(item => item.CompanyId == id)
        console.log(tem,"tem");
        if (tem) {
          //总重量
          allWight = tem.map(item => {
            return parseInt(item.InputTon)
          }).reduce((acr, cur)=>{ return acr + cur; });
        }

        if (tem[0]) {
          inputTime = tem[0].InputTime;
        }
      }
      return dat;
    }
   function getCInfo(data) {
      openItem = false;
      form.CompanyId = data[0].Id

    }

 
</script>
